<template>
	<view class="main">
		<view class="card box box-tb" v-for="(item,i) in classList" :key="i">
			<view class="card-top box box-pack-between">
				<view class="box box-pack-start box-align-center">
					<view class="icon mr10"></view>
					<view class="box box-tb box-pack-start box-align-start ml10">
						<view class="class-name">
							{{item.bjmc}}
						</view>
						<view class="class-info box box-pack-around mt10" @click="goClassInfo(item.id)">
							<u-image src="@/static/home/icon_stu.png" width="29rpx" height="24rpx"><u-loading
									slot="loading"></u-loading></u-image>
							{{item.stuNum}}人
							<u-button type="primary" open-type="share" :custom-style="customStyle">邀请</u-button>
						</view>
					</view>
				</view>

				<view class="btn box box-align-center" @click="changeClass(item)">
					<u-image src="@/static/home/icon_change.png" width="27rpx" height="27rpx"><u-loading
							slot="loading"></u-loading></u-image>
				</view>
			</view>
			<!-- <view class="card-bottom box box-pack-between box-align-center">
				<view class="box box-align-center">
					课程任务
					<view class="num">
						{{item.cousTaskNum==null?0:item.cousTaskNum}}
					</view>
				</view>
				<view class="posr box box-align-center">
					实践任务
					<view class="num">
						{{item.ldsjNum==null?0:item.ldsjNum}}
					</view>
					<view class="tips" v-if="item.nojudge>0">
						未批阅 +{{item.ldsjDkNum}}
					</view>
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("user"),
				currSchool: uni.getStorageSync('currSchool'),
				classList: [],
				customStyle: {
					width: '75px',
					height: '34px',
					lineHeight: '45rpx',
					backGround: '#7686F6',
					borderRadius: '26rpx',
					padding: '10rpx 20rpx',
					marginLeft: '30rpx',
					position: 'absolute',
					right: '20px'
				},
				invite_cnt: '', //邀请学校人数
			}
		},
		onLoad() {
			this.getClassList();
			this.getschooltrs();
		},
		onShareAppMessage(res) {
			wx.vibrateShort();
			return {
				title: '邀请您加入【' + this.user.schoolName + '】,已有' + this.invite_cnt + '人加入~',
				path: '/team/tr/invite?schoolid=' + this.schoolid + '&userid=' + this.user.id +
					'&schoolname=' + this.currSchool.name + '&trname=' + this.user.name + '&icon=' + this.user.icon,
				imageUrl: 'https://yh-sys.oss-cn-beijing.aliyuncs.com/2AA82D3CF32F47D0BBFBC6037E73D503join.png?Expires=4792987242&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=skoxCO1pZ1kn3DJIiBTnGM%2FO2oY%3D'
			}
		},
		methods: {
			getClassList() {
				this.$api.post({
					url: '/dclass/trClassList'
				}, {
					trid: this.user.id
				}).then(res => {
					this.classList = res.list;
				})
			},
			goClassInfo(id) {
				uni.navigateTo({
					url: "/pageHome/classInfo?id=" + id
				})
			},
			changeClass(classInfo) {
				uni.setStorageSync("clazz", classInfo)
				uni.reLaunch({
					url: "/pages/index/index"
					// url: "/pages/home/createClass"
				})
			},
			getschooltrs() {
				this.$api.post({
					url: '/dteacher/getschooltrs'
				}, {
					schoolid: this.currSchool.id
				}).then(res => {
					this.invite_cnt = res.cnt;
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.card {
		padding: 35rpx;
		margin-bottom: 20rpx;
		height: 230rpx;
		background-color: #fff;
		box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
		border-radius: 30rpx;

		.card-top {
			height: 180rpx;
			box-sizing: border-box;
			// border-bottom: 2rpx solid #F0F1F8;

			.class-name {
				font-size: 38rpx;
				font-weight: 600;
			}

			.class-info {
				width: 124rpx;
				height: 34rpx;
				border-radius: 10px;
				color: #6E73D8;
				font-size: 26rpx;
			}

			.btn {
				width: 30rpx;
				height: 26rpx;
				line-height: 26rpx;
				color: #626BF1;
			}

		}

		.card-bottom {
			height: 150rpx;
			padding-left: 50px;
			padding-right: 50px;

			.num {
				margin-left: 5px;
				font-size: 48rpx;
			}

			.posr {
				position: relative;

				.tips {
					position: absolute;
					top: -36rpx;
					right: -130rpx;
					width: 140rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #FF5A77;
					border-radius: 26rpx;
					font-size: 20rpx;
					text-align: center;
					color: #fff;
				}
			}
		}
	}

	.icon {
		width: 14rpx;
		height: 128rpx;
		background: #8A8DF3;
		box-shadow: 4rpx 1rpx 13rpx 0px #626BF1;
		border-radius: 7rpx;
	}
</style>